<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)">
  <main-content>
    <!--<div nz-form-item nz-row style="margin-top:25px;">-->
      <!--<div nz-col [nzSm]="24">-->
        <!--<div class="text-left">-->
          <!--<label>活动名称：</label>-->
          <!--<nz-input [nzSize]="'large'" name="keyword" [(ngModel)]="name" style="width: 185px;"></nz-input>-->
          <!--<button nz-button [nzType]="'primary'" [nzSize]="'large'" style="margin-left:22px;" (click)="getList(true);">-->
            <!--查询-->
          <!--</button>-->
          <!--<button nz-button class="ml-7" (click)="name='';getList(true)" [nzSize]="'large'">重置</button>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

    <div class="product-operate clearfix">
      <div nz-col [nzSm]="12">
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="goAddPage()">
          <i class="anticon anticon-plus"></i><span>新建活动</span>
        </button>
      </div>
    </div>
    <div class="product-list-out mt-16">
      <div class="checked-line" *ngIf="!!checkedIds.length">
        <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
        <a href="javascript:;" (click)="checkedIds=[];_indeterminate=false;_checkAll(false);">清空</a>
      </div>
      <nz-table [(nzLoading)]="loading"
                [nzCustomNoResult]="true"
                [(nzPageSize)]="pageSize"
                [(nzPageIndex)]="page"
                [(nzTotal)]="total"
                (nzPageIndexChange)="getActivityList()"
                [nzAjaxData]="activityList">
        <thead nz-thead>
        <tr>
          <th nz-th [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
                   (ngModelChange)="_checkAll($event)">
            </label>
          </th>
          <th nz-th style="width: 300px;"><span>策划页名称</span></th>
          <th nz-th><span>展示封图</span></th>
          <th nz-th><span>创建时间</span></th>
          <th nz-th><span>二维码</span></th>
          <th nz-th style="width: 120px"><span>操作</span></th>
        </tr>
        </thead>
        <tbody nz-tbody *ngIf="activityList.length > 0">
        <ng-container *ngFor="let item of activityList; let i = index;">
          <tr nz-tbody-tr>
            <td nz-td [nzCheckbox]="true">
              <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="checkedSingele($event, item.id)">
              </label>
            </td>
            <td nz-td>{{ item.title }}</td>
            <td nz-td>
              <img style="width:64px;height:64px;" *ngIf="item.cover_url" src="{{aliyunOssOutputUrl + '/' + item.cover_url}}" alt="">
              <span *ngIf="!item.cover_url">无图片</span>
            </td>
            <td nz-td>
              <span>{{ item.created_at }}</span>
            </td>
            <td nz-td><a (click)="showQrcodeModal(i,item.id)">查看二维码</a></td>
            <td nz-td>
              <a (click)="goEditPage(item.id)">编辑</a>
              <span nz-table-divider class="span-divider"></span>
              <a (click)="showDeleteConfirm(item.id)">删除</a>
            </td>
          </tr>
        </ng-container>
        </tbody>
        <div noResult>
          <div class="text-center" style="margin-top:132px;margin-bottom:100px;">
            <i class="empty-icon"></i>
            <p>目前并无策划页</p>
            <p>请添加策划页</p>
          </div>
        </div>
      </nz-table>
    </div>
  </main-content>
</main-layout>

<nz-modal [nzVisible]="qrcodeVisible" [nzTitle]="'二维码'" [nzWidth]="'400px'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
  <ng-template #modalContent>
    <div class="qrcode-wrapper">
      <nz-spin [nzTip]="'正在读取二维码...'" [nzSpinning]="_isSpinning" style="width:100%;height:100%;position:absolute;left:0;top:0;">
      </nz-spin>
      <ng-container *ngIf="editIndex != null">
        <img style="position: absolute;left:0;top:0;" *ngIf="activityList[editIndex]['qrcode_url']" src="{{ activityList[editIndex]['qrcode_url'] }}" alt="">
      </ng-container>
    </div>
  </ng-template>
</nz-modal>
